/*
收件人信息5
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="getAddressee" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delAddressee" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <div style="flex: 1; margin-bottom: 10px;">
      <el-card>
        <div class="app-page">
          <!-- 搜索区 -->
          <div class="content-flex">
            <div>
              <el-form ref="search" :model="search" inline size="small">
                <el-form-item label="" prop="info">
                  <el-input placeholder="收件人/电话/收件地址/备注" v-model="search.info" style="width: 300px"
                    clearable></el-input>
                </el-form-item>
                <el-form-item label="" prop="defaulted">
                  <el-select clearable v-model="search.defaulted" placeholder="是否默认" style="width: 100px">
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="Enabled">
                  <el-select clearable v-model="search.Enabled" placeholder="是否启用" style="width: 100px">
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间" prop="time">
                  <el-date-picker v-model="search.time" type="daterange" range-separator="-" value-format="yyyy-MM-dd"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="query_batchId">
                  <el-button type="primary" round @click="searchPage">搜索</el-button>
                  <el-button type="warning" round @click="$refs.search.resetFields()">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 列表区 -->
          <div style="flex: 1">
            <el-table height="100%" :data="data" border stripe highlight-current-row ref="multipleTable"
              @row-dblclick="handleRowDbclick" @selection-change="handleSelectionChange">
              <el-table-column type="index" width="55" align="center"></el-table-column>
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column label="收件人" prop="name">
                <template slot-scope="scope">
                  <div class="tdItem">
                    <el-link @click="handleRowDbclick(scope.row)">
                      {{ scope.row.name }}&nbsp;&nbsp;
                    </el-link>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="手机" prop="phoneNum"></el-table-column>
              <el-table-column label="收件地址" prop="address" width="800px">
                <template slot-scope="scope">
                  {{ scope.row.provinceName }}{{
                    scope.row.cityName }}{{ scope.row.countyName }}{{
                    scope.row.stressName }}{{ scope.row.address }}
                </template>
              </el-table-column>
              <el-table-column label="启用" prop="enabled" align="center" width="100">
                <template slot-scope="scope">
                  <span style="font-size: 20px">
                    <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.enabled"></i>
                    <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" sortable prop="createTime" align="center"></el-table-column>
            </el-table>
          </div>

          <!-- 分页区 -->
          <div style="margin-top: 10px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[20, 50, 100, 200, 500, 1000]" :page-size="pageSize" background
              :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'" :small="isMobile"
              :total="total">
            </el-pagination>
          </div>

        </div>
      </el-card>
    </div>

    <!-- 添加修改收件人信息 -->
    <el-dialog :title="title + '收件人地址薄'" v-dialog-drag :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      @close="restForm">
      <el-form size="small" :model="addresseeDetailForm" label-position="left" label-width="120px"
        ref="addresseeDetailForm" :rules="addresseeDetailRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="name" label="收件人姓名">
              <el-input v-model.trim="addresseeDetailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phoneNum" label="收件人电话">
              <el-input v-model.trim="addresseeDetailForm.phoneNum"></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item prop="addressCompany" label="收件人公司">-->
          <!--              <el-input v-model="addresseeDetailForm.addressCompany"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="countryName" label="国家名称">
              <el-select @change="handleCountryChange" filterable style="width: 100%"
                v-model="addresseeDetailForm.countryName" placeholder="请选择国家名称">
                <el-option v-for="item in addresseeDetailOptions.countryName" :key="item" :value="item"
                  :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="provinceName" label="省份名称">
              <el-select filterable @change="handleProvinceChange" style="width: 100%"
                v-model="addresseeDetailForm.provinceName" placeholder="请选择省份名称">
                <el-option v-for="item in addresseeDetailOptions.provinceName" :key="item" :value="item"
                  :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="cityName" label="城市名称">
              <el-select filterable style="width: 100%" v-model="addresseeDetailForm.cityName" placeholder="请选择城市名称">
                <el-option v-for="item in addresseeDetailOptions.cityName" :key="item" :value="item"
                  :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="countyName" label="区县名称">
              <el-input v-model="addresseeDetailForm.countyName"></el-input>
              <!-- <el-select
                placeholder="请选择区县名称"
                style="width: 100%"
                filterable
                v-model="storeDetailForm.countyName"
              >
                <el-option
                  v-for="item in addresseeDetailOptions.countyName"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="stressName" label="街道名称">
              <el-input v-model="addresseeDetailForm.stressName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="postalCode" label="邮政编码">
              <el-input v-model.trim="addresseeDetailForm.postalCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="address" label="收件地址">
              <el-input :rows="2" v-model="addresseeDetailForm.address" type="textarea" placeholder="收件地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="note" label="备注">
              <el-input v-model="addresseeDetailForm.note" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <!--              <el-checkbox v-model="addresseeDetailForm.defaulted">是否默认地址</el-checkbox>-->
              <el-checkbox v-model="addresseeDetailForm.enabled" style="display: none;">启用</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
let search = {
  //客户号
  customerNum: '',
  //收件人、电话、收件地址、备注
  info: '',
  //是否默认
  defaulted: '',
  //是否启用
  Enabled: '',
  //创建时间
  time: []
}
//收件人地址簿信息表单
let addresseeDetailForm = {
  //收件地址
  address: '',
  //城市名称
  cityName: '',
  //国家名称
  countryName: '中国',
  //县
  countyName: '',
  //客户号
  customerNum: '',
  //是否默认地址
  defaulted: false,
  //是否启用
  enabled: true,
  //收件人姓名
  name: '',
  //备注
  note: '',
  //收件人电话
  phoneNum: '',
  //邮政编码
  postalCode: '',
  //省份
  provinceName: '',
  //街道
  stressName: ''
}
import myHeader from '@/components/pageHEader/pageHeader'
import { dateFormat } from '@/utils'
import {
  getProvinces,
  getCities,
  getCoungries
} from '@/api/common'
import {
  getAddressee,
  addAddressee,
  modAddressee,
  delAddressee,
  disableOrEnableAddressee
} from '@/api/consumers/consigneebook'
import { mapGetters } from 'vuex'
export default {
  name: 'consigneebook',
  components: {
    myHeader
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //对话框
      dialogFormVisible: false,
      title: '添加',
      addresseeDetailForm: this.cloneObj(addresseeDetailForm),
      addresseeDetailRules: {
        //收件人姓名
        name: [this.$RegExp.required('收件人姓名不能为空')],
        //收件人电话
        phoneNum: [this.$RegExp.required('收件人电话不能为空')],
        //国家名称
        countryName: [this.$RegExp.required('国家名称不能为空')],
        //省份
        provinceName: [this.$RegExp.required('省份名称不能为空')],
        //城市名称
        cityName: [this.$RegExp.required('城市名称不能为空')],
        //县
        countyName: '',
        //街道
        streetName: '',
        //邮政编码
        postalCode: '',
        //详细地址
        address: ''
      },
      addresseeDetailOptions: {
        countryName: [],
        provinceName: [],
        cityName: [],
        countyName: [],
        streetName: []
      },
      //查看门店
      dialogViewVisible: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isMobile() {
      return window.innerWidth <= 768;
    }
  },
  mounted() {
    //获取所有国家
    getCoungries().then((resp) => {
      this.addresseeDetailOptions.countryName = resp.data;
    });
    this.getAddressee();
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAddressee();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAddressee();
    },
    //获取收件人所有数据、刷新
    getAddressee() {
      let query = {
        customerNum: this.userInfo.customerNum,
        defaulted: this.search.defaulted,
        enabled: this.search.Enabled,
        info: this.search.info,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      if (this.search.time && this.search.time.length > 0) {
        query.endDate = this.search.time[1] + ' 23:59:59';
        query.startDate = this.search.time[0] + ' 00:00:00';
      }
      getAddressee(query).then((resp) => {
        this.data = resp.data.records;
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage() {
      this.currentPage = 1
      this.pageSize = 20
      this.getAddressee()
    },
    handleBeforeUpdate() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    //添加或修改收件人信息
    handleAddUpdate(row) {
      if (row) {
        //将数据复制给form
        this.handleModform(row, this.addresseeDetailForm);
        this.getProvinces();
        this.getCities();
        this.addresseeDetailForm.id = row.id;
        this.dialogFormVisible = true;
        this.title = '修改';
      } else {
        this.addresseeDetailOptions.cityName = [];
        this.addresseeDetailOptions.provinceName = [];
        this.addresseeDetailForm = this.cloneObj(addresseeDetailForm);
        this.title = '添加';
        this.addresseeDetailForm.customerNum = this.userInfo.customerNum
        this.handleCountryChange()
        this.dialogFormVisible = true;
      }
    },
    //确定收件人信息按钮
    submit() {
      this.$refs['addresseeDetailForm'].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.addresseeDetailForm);
          let request;
          if (this.title == '添加') {
            request = addAddressee(submit);
          } else {
            request = modAddressee(submit);
          }
          //不要默认地址了
          submit.defaulted = false
          request.then((resp) => {
            this.$message.success(resp.message || '成功');
            this.dialogFormVisible = false;
            this.getAddressee();
          });
        }
      })
    },
    //查看收件人信息
    addresseeView() {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      this.dialogViewVisible = true;
    },
    //删除收件人信息
    delAddressee() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delAddressee(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getAddressee();
          }
        );
      });
    },
    //启用或禁用收件人信息
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let addressee = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用收件人, 是否继续?";
      } else {
        tip = "此操作将禁用收件人, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableAddressee(addressee, { enabled }).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getAddressee();
        });
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    //点击选中框选中收件人信息
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //重置收件人表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.addresseeDetailForm) {
          this.$refs.addresseeDetailForm.resetFields();
        }
      });
    },
    //获取省份
    getProvinces() {
      getProvinces(this.addresseeDetailForm.countryName).then((resp) => {
        this.addresseeDetailOptions.provinceName = resp.data;
      })
    },
    //获取市
    getCities() {
      getCities(this.addresseeDetailForm.provinceName).then((resp) => {
        this.addresseeDetailOptions.cityName = resp.data;
      })
    },
    //select改变国家名称
    handleCountryChange() {
      this.addresseeDetailOptions.provinceName = [];
      this.addresseeDetailForm.provinceName = '';
      this.getProvinces();
    },
    //select改变省份名称
    handleProvinceChange() {
      this.addresseeDetailOptions.cityName = [];
      this.addresseeDetailForm.cityName = '';
      this.getCities();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/_themeify";
@import "../../styles/mobile.scss";

.app-page {
  .search-form {
    @media screen and (max-width: 768px) {
      .el-form-item {
        width: 100%;
        margin-right: 0;
      }
    }
  }

  .el-table {
    @media screen and (max-width: 768px) {
      /deep/ .el-table__row {
        td {
          padding: 5px !important;
        }
      }

      /deep/ .el-table-column--selection {
        width: 40px !important;
      }
    }
  }
}

// 移动端对话框样式优化
.el-dialog {
  @media screen and (max-width: 768px) {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;

        .el-form-item__label {
          float: none;
          text-align: left;
          padding: 0 0 5px;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .el-input,
      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
